import { useState, useCallback } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import Taro from '@tarojs/taro'
import { View, Button, Text, Input } from '@tarojs/components'
import $http from '@/http'

const Register = () => {
  const user = useSelector(state => state.user)
  console.log('user', user)

  const [phone, setPhone] = useState('')
  const [password, setPassword] = useState('')
  const [passwordAgain, setPasswordAgain] = useState('')

  const dispatch = useDispatch()
  const registerAsync = useCallback(
    params => dispatch({ type: 'increment-counter', payload: params }),
    [dispatch]
  )

  // 点击注册
  const register = async() => {
    if (!phone) {
      Taro.showToast({
        title: '手机号不能为空!',
        icon: 'none',
        mask: true,
        duration: 1500
      })
      return false
    }

    if (!password) {
      Taro.showToast({
        title: '密码不能为空!',
        icon: 'none',
        mask: true,
        duration: 1500
      })
      return false
    }
    
    if (!passwordAgain) {
      Taro.showToast({
        title: '请再次输入密码!',
        icon: 'none',
        mask: true,
        duration: 1500
      })
      return false
    }
    
    if (password && passwordAgain && password !== passwordAgain) {
      Taro.showToast({
        title: '输入密码前后不一致',
        icon: 'none',
        mask: true,
        duration: 1500
      })
      return false
    }

    Taro.showLoading({
      title: '注册中',
      mask: true
    })

    await $http.get('/juejin/user_api/v1/author/recommend', {
      category_id: '',
      cursor: 0,
      limit: 20,
    })

    Taro.hideLoading()

    registerAsync({
      phone,
      password
    })
    
    Taro.showToast({
      title: '注册成功',
      icon: 'success',
      mask: true,
      duration: 1500,
      success() {
        backLogin()
      }
    })
  }

  // 返回登录页面
  const backLogin = () => {
    Taro.navigateTo({
      url: '/pages/login/index'
    })
  }

  return (
    <View>
      <View><Text>注册页面</Text></View>
      <View>
          <View>
            <View>
              <View>手机号</View>
              <View>
                <Input
                  value={phone}
                  type='text'
                  placeholder='请输入手机号'
                  onInput={e => setPhone(e.detail.value)}
                />
              </View>
            </View>
            <View>
              <View>密码</View>
              <View>
                <Input
                  value={password}
                  type='number'
                  password
                  placeholder='请输入密码'
                  onInput={e => setPassword(e.detail.value)}
                />
              </View>
            </View>
            <View>
              <View>确认密码</View>
              <View>
                <Input
                  value={passwordAgain}
                  type='number'
                  password
                  placeholder='请再次输入密码'
                  onInput={e => setPasswordAgain(e.detail.value)}
                />
              </View>
            </View>
          </View>
          <Button style={{ background: '#6190e8', color: '#ffffff' }} onClick={register}>
            注册
          </Button>
          <Button style={{ background: '#6190e8', color: '#ffffff' }} onClick={backLogin}>
            返回登录
          </Button>
        </View>
    </View>
  )
}

export default Register
